import { defineComponent, PropType, unref, computed } from 'vue'
import { createFromIconfontCN } from '@ant-design/icons-vue'
import { isString } from '@/utils/is'

let IconFont = createFromIconfontCN({
  // iconfont字体图标本地化，详见：/public/iconfont.js
  scriptUrl: '//at.alicdn.com/t/font_2969552_t6abo7zdqbk.js'
})

export default defineComponent({
  name: 'IconFont',
  props: {
    icon: {
      type: String as PropType<string>,
      default: ''
    },
    color: {
      type: String as PropType<string>,
      default: 'unset'
    },
    size: {
      type: [Number, String] as PropType<number | string>,
      default: 16
    },
    scriptUrl: {
      // 阿里图库字体图标路径
      type: String as PropType<string>,
      default: ''
    }
  },
  setup (props, { attrs }) {
    // 若外部传进来字体图标路径，覆盖默认
    if (props.scriptUrl) {
      IconFont = createFromIconfontCN({
        scriptUrl: props.scriptUrl
      })
    }

    const wrapStyle = computed(() => {
      const { color, size } = props
      const fs = isString(size) ? parseFloat(size as string) : size

      return {
        color,
        fontSize: `${fs}px`
      }
    })

    return () => <IconFont type={ props.icon || ''} { ...attrs } style={unref(wrapStyle)} />
  }
})
